<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>自定义属性</title>
</head>
<body>
  <button>我是按钮1</button>
  <button>我是按钮2</button>
  <button>我是按钮3</button>

  <script>
    var btnList = document.querySelectorAll('button');

    for(var i = 0; i < btnList.length; i++) {
      // 设置自定义属性: 元素对象.属性名= 属性值(原理是向元素对象对应的堆内存中添加了一个属性)
      // btnList[i].myIndex = i;
      // 设置自定义属性: 基于setAttribute是把属性信息写到了元素标签的结构上(在结构中可以看到的), 并没有放到元素对象对应的堆内存中
      btnList[i].setAttribute('data-index', i);
      btnList[i].onclick = function() {
        // 获取自定义属性: 元素对象.属性(原理是从堆内存中获取对应的属性值)
        // alert(this.myIndex);
        // 基于getAttribute可以把结构上的存储的自定义属性值获取到
        alert(this.getAttribute('data-index'));
      }
    }
  </script>
</body>
</html>